<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">
      我的申请
    </div>
    <el-card
      shadow="never"
      body-style="padding: 24px;">
      <el-table
        :data="approFlowList"
        style="width: 100%"
        class="has-top-border"
        stripe>
        <!--<el-table-column prop="studentNum" label="序号"></el-table-column>-->
        <el-table-column
          prop="no"
          label="申请编号"/>
        <el-table-column
          prop="applicantId"
          label="申请人ID"/>
        <el-table-column
          prop="applicantName"
          label="申请人"/>
        <el-table-column
          prop="wfTypeName"
          label="申请类型"/>
        <el-table-column
          prop="approvorName"
          label="当前处理人"/>
        <el-table-column
          prop="time"
          label="申请时间">
          <template slot-scope="scope">
            {{ scope.row.time | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="result"
          label="审批状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.result == 'Process'"
              type="success">进行中</el-tag>
            <el-tag
              v-if="scope.row.result == 'End'"
              type="info">已结束</el-tag>
            <el-tag
              v-if="scope.row.result == 'Reject'"
              type="warning">已驳回</el-tag>
            <el-tag
              v-if="scope.row.result == 'Recall'"
              type="warning">撤回</el-tag>
          </template>
        </el-table-column>
        <!--<el-table-column prop="dakafanwei" label="下一级审批人">-->
        <!--<template slot-scope="scope">-->
        <!--<i v-if="!scope.row.dakafanwei" class="el-icon-error color-error"></i>-->
        <!--<i v-if="scope.row.dakafanwei" class="el-icon-success color-success"></i>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="showRollDetail(scope.row.no)">查看明细</el-button>
              <!--<el-button type="text" size="mini">导出</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="edu-pagination">
        <div class="float-right">
          <el-pagination
            :current-page="queryItem.pageNum"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="20"
            :total="queryItem.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="float: right;margin:10px 60px 0 0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { selectApproFlowList } from 'common/src/api/approval'
import { mapState } from 'vuex'
import filters from 'common/src/filters'
export default {
  name: 'StudentRollCheck',
  filters: {
    formatDate(date) {
      return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss')
    }
  },
  data() {
    return {
      approFlowList: [],
      queryItem: {
        total: 0,
        pageNum_: 1,
        pageSize_: 20,
        applicantId: ''
      }
    }
  },
  computed: {
    ...mapState({
      mockUser: state => state.session.mockUser
    })
  },
  created() {
    this.queryItem.applicantId = this.mockUser ? this.mockUser.uid : localStorage.getItem('uid')
    this.init(this.queryItem)
  },
  methods: {
    showRollDetail(id) {
      this.$router.push('/StudentRollDetail?id=' + id)
    },
    handleSizeChange(pageSize) {
      this.queryItem.pageSize_ = pageSize
      this.queryItem.pageNum_ = 1
      this.init(this.queryItem)
    },
    handleCurrentChange(pageNum) {
      this.queryItem.pageNum_ = pageNum
      this.init(this.queryItem)
    },
    init(queryItem) {
      selectApproFlowList(queryItem).then(res => {
        this.approFlowList = res.data.list
        this.queryItem.total = res.data.total_
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
